<template>
    <el-dialog @close="cancleAddProcess" v-model="dialogVisible" width="30%" title="添加工艺组成" destroy-on-close center>
        <template #default>
            <el-form :model="process" label-width="100px" label-position="left">
                <el-form-item label="顺序编号">
                    <el-input type="number" v-model="process.orderNum" aria-placeholder="序号" />
                </el-form-item>
                <el-form-item label="工序">
                <el-select v-model="process.processName" placeholder="请选择工序">
                    <el-option v-for="item in processList" :key="item.processId" :label="item.processName" :value="item.processName" />
                </el-select>
                </el-form-item>
                <el-form-item label="下一道工序">
                    <el-select v-model="process.nextProcessName" placeholder="请选择工序">
                        <el-option v-for="item in processList" :key="item.processId" :label="item.processName" :value="item.processName" />
                    </el-select>
                </el-form-item>
                <el-form-item label="下一道关系">
                    <el-select v-model="process.nextRelation" placeholder="请选择与下一道工序关系">
                        <el-option v-for="item in nextRelationList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="关键工序">
                    <el-radio-group v-model="process.keyProcess">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="质检确认">
                    <el-radio-group v-model="process.qualityConfirm">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="准备时间">
                    <el-input type="number" v-model="process.prepareTime" aria-placeholder="准备时间" />
                </el-form-item>
                <el-form-item label="等待时间">
                    <el-input type="number" v-model="process.waitTime" aria-placeholder="等待时间" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="process.notes" aria-placeholder="备注" />
                </el-form-item>
            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addProcess">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancleAddProcess">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
import composeRequest from '@/api/compose.js';
export default {
    props: ["visible","techniqueId"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加完成事件
    data() {
        return {
            process: {},// 绑定新增的工序信息
            dialogVisible: false,// 添加组成工序窗口的显示与隐藏
            processList: [],
            nextRelationList: [
                {
                    value: 1,
                    label: 'S-to-S'
                },
                {
                    value: 2,
                    label: 'F-to-F'
                },
                {
                    value: 3,
                    label: 'S-to-F'
                },
                {
                    value: 4,
                    label: 'F-to-S'
                }
                ]
        }
    },
    methods: {
        /**
         * 获取所有工序名称
         */
        getProcessList(){
            composeRequest.getProcessList(res=>{
                this.processList = res.data;
            })
        },
        /**
         * 取消添加组成工序
         */
        cancleAddProcess(){
            this.process = {};
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加组成工序信息
         */
        addProcess(){
            this.process.techniqueId = this.techniqueId;
            composeRequest.addCompose(this.process,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '添加工序成功!'
                    });
                    // 通知父组件  操作完成，让父组件关闭窗体
                    this.process = {};
                    this.$emit("optionCompleted");
                }else if(res.code == '300'){
                    this.$message({
                        type: 'warning',
                        message: '工序' + (res.msg.indexOf("processName") > 0 ?"名称":"类型") + "重复"
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '添加工序失败!'
                    });
                }
            });
        },
    }, mounted(props) {
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });
        this.getProcessList();
    }
}
</script>